<template>
  <div class='container'>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">活动名称:</span>
      <el-input class='flex-1' v-model="name_value"></el-input>
    </div>
    <div class="m-50-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">是否发布:</span>
        <el-radio v-model="open_radio" :label="0">是</el-radio>     
        <el-radio v-model="open_radio" :label="1">否</el-radio>     
      </div>
    </div>
    <div class="m-20-t">
      <div class='app-row'>
        <span class="title bold width-100 align-right">活动时间:</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="large"
          @change="date_change">
        </el-date-picker>
      </div>
      <div class='annotation m-10-t m-114-l'>
        <span>* 此活动的使用时间段</span>
      </div>
    </div>
    <!-- <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">活动类型:</span>
      <el-select class='flex-1' v-model="type_value" placeholder="请选择">
        <el-option
          v-for="item in type_options"
          :key="item.value"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>* 选择一种活动类型</span>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">奖励方式:</span>
      <el-select class='flex-1' v-model="award_type_value" placeholder="请选择">
        <el-option
          v-for="item in award_type_options"
          :key="item.value"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>* 选择一种活动奖励方式</span>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-120 align-right">活动生效条件:</span>
      <el-select class='flex-1' v-model="active_value" placeholder="请选择" @change="change_condition">
        <el-option
          v-for="item in active_options"
          :key="item.value"
          :value="item.value"
          :label="item.label"
          >
        </el-option>
      </el-select>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>* 选择一种活动生效的条件</span>
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">奖励值:</span>
      <el-select class='flex-1' v-model="award_value" placeholder="请选择">
        <el-option
          v-for="item in award_options"
          :key="item.value"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class='annotation m-10-t m-114-l'>
      <span>* 选择一种奖励值</span>
    </div> -->
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">排序:</span>
      <el-input class='flex-1' v-model="rank_value" type="number"></el-input>
    </div>
    <div class='flex m-30-t'>
      <span class="title bold " style="width: 120px">设置抢购商品:</span>
      <el-select class='flex-1' v-model="good_value" placeholder="请选择" @change="choose_good">
        <el-option
          v-for="item in good_options"
          :key="item.id"
          :value="item.id"
          :label="item.name">
        </el-option>
      </el-select>

      
    </div>
    <div class='app-row m-20-t'>
      <span class="title bold width-100 align-right">介绍:</span>
      <div style="width: 90%">
       <el-input type="textarea" :rows="4" v-model="text_value" placeholder="请输入内容"></el-input>

      </div>
    </div>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确定修改</el-button>
    </div>
    <el-dialog
      title="选择要抢购的商品"
      :visible.sync="choose_dialog"
      width="30%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="choose_dialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm_button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import goods_request from "@/api/goods_request"
  import moment_request from "@/api/moment_request"
  export default {
    name: 'moment_edit',
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        rank_value: '',
        name_value: "",
        description_value: "",
        url_value: "",
        open_radio: 0,
        price_value: '',
        choose_dialog: false,
        setting_goods: false,
        text_value: '',
        value2: '',
        type_value: '',
        good_options: '',
        good_value: '',
        good_id: '',
        type_options: [{value: "购物车促销规则"},
                    {value: "商品限时抢购"},
                    {value: "商品分类特价"},
                    {value: "商品单品特价"},
                    {value: "商品品牌特价"},
                    {value: "新用户注册促销规则"},
                    {value: "在线充值活动"},],
        award_type_value: '',
        award_type_options: [{value: '商品限时抢购'},
                             {value: '减金额'},
                             {value: '奖励折扣'},
                             {value: '赠送积分'},
                             {value: '赠送优惠券'},
                             {value: '赠送赠品'},
                             {value: '免运费'},
                             {value: '商品特价'},
                             {value: '赠送经验'}],
        active_value: '',
        active_options: [{label: '促销规则消费额度',value:0},
                             {label: '限时抢购商品ID',value:1},
                             {label: '特价商品分类ID',value:2},
                             {label: '特价商品ID',value:3},
                             {label: '特价商品品牌ID',value:4},
                             {label: '无意义',value:5},
                             {label: '充值金额',value:6},
                            //  {value: '商品特价'},
                            //  {value: '赠送经验'}
                             ],
        award_value: '',
        award_options: [{value: '促销规则消费额度'},
                             {value: '限时抢购商品ID'},
                             {value: '特价商品分类ID'},
                             {value: '特价商品ID'},
                             {value: '特价商品品牌ID'},
                             {value: '无意义'},
                             {value: '充值金额'},
                             {value: '商品特价'},
                             {value: '赠送经验'}]
                      }
    },
    computed: {
      start_time() {
        return this.value2==''?'':this.value2[0].getFullYear() + '-' + (this.value2[0].getMonth() + 1) + '-' + this.value2[0].getDate()
      },
      end_time() {
        return this.value2==''?'':this.value2[1].getFullYear() + '-' + (this.value2[1].getMonth() + 1) + '-' + this.value2[1].getDate()
      },
    },
    created() {
      this.get_detail(this.$route.query.id)
      this.get_good_list()
    },
    mounted() {
  
    },
    methods: {
      get_good_list() {
        let params = {
          pageSize: 100, page: 1
        }
        goods_request.goods_list( params, res=> {
          let good_options = []
          for (let item of res.data) {
            if (item.is_del!=2) {
              good_options.push(item)
            }
          } 
          this.good_options = good_options
        })
      },
      choose_good(e) {
        this.good_id = e
      },
      edit_button() {
        let params = {
          condition: this.good_id,
          name: this.name_value,
          start_time: this.start_time,
          end_time: this.end_time,
          sort: this.rank_value,
          type: 1,
          intro: '五一秒杀活动',
          award_type: 0,
          award_value: "99.99",
          content: "这是一个案情内容",
          is_close: this.open_radio,

          // user_group: '123'
        }
        console.log(params)
        moment_request.edit_moment(params, res=> {
          this.$router.push('/marketing/moment')
        })
      },
      get_detail(id) {
        moment_request.detail_moment({id}, res=> {
          let result = res.data
          this.name_value = result.name
          this.value2 = [new Date(result.start_time),new Date(result.end_time)]
          this.rank_value = result.sort
          this.good_id = result.condition
          let params = {
            id: result.condition
          }
          goods_request.detail_goods(params, res=>{
            let result = res.data
            this.good_value = result.name
          })
        })
      },
      choose_goods() {
        this.choose_dialog = true
      },
      confirm_button() {
        this.choose_dialog = false
        this.setting_goods = true
      },
      date_change(val) {
      },
    }
  }
</script>

<style scoped>
@import "~@/styles/layout.scss";
</style>